<script lang="ts" setup>
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { ref } from 'vue'

import { imagePath } from '@/libs/file-utils'
import { backToMain } from '@/libs/common'
import { userInfoFull } from '@/libs/user';

const btn_open = imagePath('index/btn-open.png')

// const videoSrc = `${server.srcServer}videos/cover1.mp4`
// let timeout: any = null

// const start = (t: number) => {
//   timeout && clearTimeout(timeout)
//   timeout = setTimeout(end, t * 1000)
// }

// const end = () => {
//   clearTimeout(timeout)
//   timeout = null
//   backToMain()
// }

const posterList = new Array(5).fill('').map((_, i) => (imagePath(`index/poster-${i + 1}.jpg`)))
const curPosterIdx = ref(0)
</script>

<template>
  <PageWrapper
    name="index"
    :showTopBar="false"
    :showBack="false"
  >
    <!-- <video
      class="bg"
      :src="videoSrc"
      autoplay
      :controls="false"
      :show-progress="false"
      :show-fullscreen-btn="false"
      :show-center-play-btn="false"
      :show-loading="false"
      :enable-progress-gesture="false"
      object-fit="cover"
      @loadedmetadata="start(10)"
      @ended="start(.5)"
      @error="start(3)"
    ></video> -->

    <swiper
      class="bg"
      :circular="false"
      :autoplay="false"
      :interval="4000"
      indicator-dots
      indicator-color="#AE9CAF"
      indicator-active-color="#402F5B"
      :current="curPosterIdx"
      @change="curPosterIdx = $event.detail.current"
    >
      <swiper-item
        v-for="(src, idx) in posterList"
        :key="idx"
      >
        <div
          class="poster"
          :style="{ backgroundImage: src }"
        ></div>
      </swiper-item>
    </swiper>

    <!-- <div class="text">
      <div class="title">蒜蒜</div>
      <div class="info">国内首创星座&MBTI合盘测试社区</div>
    </div> -->

    <div
      v-if="userInfoFull || curPosterIdx === posterList.length - 1"
      class="start"
      :style="{ backgroundImage: btn_open }"
      @click="backToMain"
    ></div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.bg {
  position: absolute;
  width: 100%;
  height: 100%;

  // pointer-events: none;

  :deep(.uni-swiper-dots) {
    bottom: 220rpx;
  }

  .poster {
    width: 100%;
    height: 100%;

    background-position: center top;
    background-size: cover;
  }
}

// .text {
//   position: absolute;
//   top: 20%;
//   left: 50%;
//   transform: translate(-50%, -50%);

//   text-align: center;
//   white-space: nowrap;

//   .title {
//     color: #40058E;
//     font-size: 192rpx;

//     -webkit-text-stroke: 2rpx #fff;
//     text-shadow: 0 0 6rpx #fff, 0 0 6rpx #fff, 0 0 6rpx #fff;
//   }

//   .info {
//     margin-top: 30rpx;

//     color: #fff;
//     font-size: 48rpx;
//   }
// }

.start {
  position: absolute;
  bottom: 55rpx;
  left: 50%;
  transform: translateX(-50%);

  width: 449rpx;
  height: 147rpx;
}
</style>